import React, { PureComponent } from "react";
import s from './index.scss'
import {Flex} from 'antd-mobile'
// 引入 ECharts 主模块
import echarts from "echarts";
// import echarts from "echarts/lib/echarts";
// // 引入提示框和标题组件
// import "echarts/lib/chart/pie";
// import "echarts/lib/chart/map";

import {callApi} from 'app/utils'
import {hashHistory} from "React-Router"
import 'echarts/map/js/china.js';

export default class extends PureComponent {
  state = {
    platformData:{}
  };
  
componentWillMount(){
    
}

componentDidMount() {
     // investAmountData1 =data['loanerInfos']['loanAccountDistributedInfos'];
    // investAmountData2 =data['loanerInfos']['ageDistributedInfos'];
    // investAmountData3 =data['loanerInfos']['areaDistributedInfos'];
    // investAmountData4 =data['loanerInfos']['genderDistributedInfos'];
    // investAmountData5 =data['projectInfo'];
    let that = this
	let str 
	
    callApi("", {}, "GET","/info",1).then(data => {
        console.log(data)
        this.setState({platformData:data})
        let myChart1 = echarts.init(document.getElementById("main1"));
        let myChart2 = echarts.init(document.getElementById("main2"));
        let myChart3 = echarts.init(document.getElementById("main3"));
        let myChart4 = echarts.init(document.getElementById("main4"));
        let myChart5 = echarts.init(document.getElementById("main5"));
        var option1 = {
            legend: {
                orient: 'vertical',
                x: 'right',
                y: 'center',
                right: '20px',
                top: '10%',
                align: 'right',
                itemWidth: '12',
                selectedMode: false,
                data:that.investAmountData(data.loanerInfos.loanAccountDistributedInfos,0)
            },
            series: {
                type: 'pie',
                center: ['35%', '50%'],
                data: that.investAmountData(data.loanerInfos.loanAccountDistributedInfos,1)
            }
        };
        myChart1.setOption(option1);



        
        var option2 = {
            legend: {
				orient: 'vertical',
				x: 'right',
				y: 'center',
				right: '0',
				top: '10%',
				align: 'right',
				itemWidth: '12',
				selectedMode: false,
				data:that.investAmountData(data.loanerInfos.ageDistributedInfos,0)
			},
			series: [
				{
					name:'访问来源',
					type:'pie',
					silent: true,
					hoverAnimation: false,
					legendHoverLink: false,
					center: ['50%', '50%'],
					radius: ['35%', '60%'],
					avoidLabelOverlap: false,
					label: {
						normal: {
							show: true,
							textStyle: {
								fontSize: 12
							},
							formatter: '{d}%'
						}
					},
					labelLine: {
						normal: {
							show: true,
							length:8,
							length2:6
						}
					},
					data: that.investAmountData(data.loanerInfos.ageDistributedInfos,1)
				}
			]
        };
        myChart2.setOption(option2);


        var option3 = {
			visualMap: {
				left: 'left',
				top: 'bottom',
				show: false,
				color: ['#57c5ff', '#5691f9']
			},
			series: [
				{
					type: 'map',
					left: '15%',
					top: '10%',
					mapType: 'china',
					label: {
						normal: {
							show: false
						}
					},
					itemStyle: {
						normal: {
							areaColor: '#fff'
						},
						emphasis: {
							color: '#57c500',
							label: {
								show: true,
								textStyle: {
									color: '#fff'
								}
							}
						}
					},
					data: [
						{
							name: '北京',
							value: Math.round(Math.random() * 1000),
							itemStyle: {
								normal: {
									color: '#32cd32',
									label: {
										show: false,
										textStyle: {
											color: '#333',
											fontSize: 12
										}
									}
								},
								emphasis: { // 也是选中样式
									borderWidth: 5,
									borderColor: 'yellow',
									color: '#cd5c5c',
									label: {
										show: false,
										textStyle: {
											color: 'blue'
										}
									}
								}
							}
						},
						{
							name: '山东',
							value: Math.round(Math.random() * 1000),
							itemStyle: {
								normal: {
									color: '#32cd32',
									label: {
										show: false,
										textStyle: {
											color: '#333',
											fontSize: 12
										}
									}
								},
								emphasis: { // 也是选中样式
									borderWidth: 5,
									borderColor: 'yellow',
									color: '#cd5c5c',
									label: {
										show: false,
										textStyle: {
											color: 'blue'
										}
									}
								}
							}
						},
						{
							name: '河南',
							value: Math.round(Math.random() * 1000),
							itemStyle: {
								normal: {
									color: '#32cd32',
									label: {
										show: false,
										textStyle: {
											color: '#333',
											fontSize: 12
										}
									}
								},
								emphasis: { // 也是选中样式
									borderWidth: 5,
									borderColor: 'yellow',
									color: '#cd5c5c',
									label: {
										show: false,
										textStyle: {
											color: 'blue'
										}
									}
								}
							}
						},
						{
							name: '湖北',
							value: Math.round(Math.random() * 1000),
							itemStyle: {
								normal: {
									color: '#32cd32',
									label: {
										show: false,
										textStyle: {
											color: '#333',
											fontSize: 12
										}
									}
								},
								emphasis: { // 也是选中样式
									borderWidth: 5,
									borderColor: 'yellow',
									color: '#cd5c5c',
									label: {
										show: false,
										textStyle: {
											color: 'blue'
										}
									}
								}
							}
						}
					],
				}
			]
		};
        myChart3.setOption(option3);


        var option4 = {
            legend: {
				orient: 'vertical',
				x: 'right',
				y: 'center',
				right: '0',
				top: '10%',
				align: 'right',
				itemWidth: '12',
				selectedMode: false,
				data:that.investAmountData(data.loanerInfos.genderDistributedInfos,0)
			},
			series: [
				{
					name:'访问来源',
					type:'pie',
					silent: true,
					hoverAnimation: false,
					legendHoverLink: false,
					center: ['50%', '50%'],
					radius: ['35%', '60%'],
					avoidLabelOverlap: false,
					label: {
						normal: {
							show: true,
							textStyle: {
								fontSize: 12
							},
							formatter: '{d}%'
						}
					},
					labelLine: {
						normal: {
							show: true,
							length:8,
							length2:6
						}
					},
					data: that.investAmountData(data.loanerInfos.genderDistributedInfos,1)
				}
			]
        };
        myChart4.setOption(option4);


        var option5 = {
            legend: {
				orient: 'vertical',
				x: 'right',
				y: 'center',
				right: '20px',
				top: '10%',
				align: 'right',
				itemWidth: '12',
				selectedMode: false,
				data:that.investAmountData(data.projectInfo,0)
			},
			series: {
				type: 'pie',
				center: ['35%', '50%'],
				label: {
					normal: {
						show: true,
						textStyle: {
							fontSize: 12
						},
						formatter: '{d}%'
					}
				},
				labelLine: {
					normal: {
						show: true,
						length:8,
						length2:6
					}
				},
				data: that.investAmountData(data.projectInfo,1)
			}
        };
        myChart5.setOption(option5);



  
      })
   


}
investAmountData(data,info) {
    var res = [];
    if(info ==1){
        for (var i = 0; i < data.length; i++) {
            res.push({
                value: data[i]['count'],
                name: data[i]['group']
            });
        }
        return res;
    }else{
        for (var i = 0; i < data.length; i++) {
            res.push({
                name: data[i]['group']
            });
        }
        return res;
    }
};

dataStr(){
   
    let that = this
    let str 
    let pd = this.state.platformData;
   
        
    return(<div>
        <Flex>
        <Flex.Item className={`${s.title}`}>数据概况</Flex.Item>
    </Flex>
    <div className={`${s.overviewBox}`}>
    <Flex>
        <Flex.Item className={`${s.item} mgr10 mgt10`}>
            <div className={``}>累计出借金额</div>
            <div className={``}><span className={`color1`}>{pd.totalLoanAmount}</span>元</div>
        </Flex.Item>
        <Flex.Item className={`${s.item} mgl10 mgt10`}>
            <div className={``}>累计收益金额</div>
            <div className={``}><span className={`color1`}>{pd.totalProfit}</span>元</div>
        </Flex.Item>
    </Flex>
    <Flex>
        <Flex.Item className={`${s.item} mgr10 mgt10`}>
            <div className={``}>累计待收金额</div>
            <div className={``}><span className={`color1`}>{pd.totalToBeCollectedAccount}</span>元</div>
        </Flex.Item>
        <Flex.Item className={`${s.item} mgl10 mgt10`}>
            <div className={``}>安全运行天数</div>
            <div className={``}><span className={`color1`}>{pd.runningTime}</span>元</div>
        </Flex.Item>
    </Flex>
    </div>
    <Flex>
        <Flex.Item className={`${s.title}`}>出借人信息</Flex.Item>
    </Flex>
    <div className={`${s.lenderInfoBox}`}>
	
        <Flex direction="column">
			<div className={`${s.tit}`}>出借金额分布</div>
            <Flex.Item className={`${s.item}`}>
                <div id="main1" className={`${s.main}`} ></div>
            </Flex.Item>
			<div className={`${s.tit}`}>年龄分布</div>
            <Flex.Item className={`${s.item}`}>
                <div id="main2" className={`${s.main}`} ></div>
            </Flex.Item>
			<div className={`${s.tit}`}>地域分布</div>
            <Flex.Item className={`${s.item}`}>
                <div id="main3" className={`${s.main}`} ></div>
            </Flex.Item>
			<div className={`${s.tit}`}>男女比例</div>
            <Flex.Item className={`${s.item}`}>
                <div id="main4" className={`${s.main}`} ></div>
            </Flex.Item>
        </Flex>
    </div>
    <Flex>
        <Flex.Item className={`${s.title}`}>项目信息</Flex.Item>
    </Flex>
    <div className={`${s.lenderInfoBox}`}>
        <Flex direction="column">
		<div className={`${s.tit}`}>出借利率分布</div>
            <Flex.Item className={`${s.item}`}>
                <div id="main5" className={`${s.main}`} ></div>
            </Flex.Item>
        </Flex>
    </div>
</div>)
}

render() {
   let str = this.dataStr()
      
    return (
      <div className={`${s.platformDataBox}`}>
        {str}
        <Flex>
            <Flex.Item className={`${s.title}`}>运营报告</Flex.Item>
        </Flex>
        <div className={`${s.overviewBox}`}>
        <Flex>
        <Flex.Item className={`${s.item} mgr10 mgt10`} onClick={()=>{
			hashHistory.push({pathname:'/platformInfo',query:{flag:'201804'}})
		}}>
            <div className={``}>2018年安心投</div>
            <div className={``}><span className={`color1`}>04月运营报告</span></div>
        </Flex.Item>
        <Flex.Item className={`${s.item} mgl10 mgt10`} onClick={()=>{
			hashHistory.push({pathname:'/platformInfo',query:{flag:'201803'}})
		}}>
            <div className={``}>2018年安心投</div>
            <div className={``}><span className={`color1`}>03月运营报告</span></div>
        </Flex.Item>
        <Flex.Item className={`${s.item} mgl10 mgt10`} onClick={()=>{
			hashHistory.push({pathname:'/platformInfo',query:{flag:'201802'}})
		}}>
            <div className={``}>2018年安心投</div>
            <div className={``}><span className={`color1`}>02月运营报告</span></div>
        </Flex.Item>
    </Flex>
    </div>
      </div>
    );
  }

}
